<script lang="ts" setup>

import {Ref, ref} from "vue";
import {messageStore} from "../store";

const themeFlag: Ref<boolean> = ref<boolean>(true);
const changeTheme = () => {
  const html = document.querySelector('html');
  const attr = html?.getAttribute('data-theme');
  if (attr === 'light') {
    html?.setAttribute('data-theme', 'dark')
    window.localStorage.setItem("mini_chat_theme", "dark")
  } else {
    html?.setAttribute('data-theme', 'light')
    window.localStorage.setItem("mini_chat_theme", "light")
  }
  themeFlag.value = !themeFlag.value;
}
let selectedIndex = ref<number>(0);
const couldChange = ref<boolean>(false);
const selected = (index: number) => {
  selectedIndex.value = index
  showColorDiv.value = false
  couldChange.value = false
  const colorChangeDiv = document.querySelector('.colorChange') as HTMLElement
  colorChangeDiv.style.top = '70%'
  wheelToTop = 0
}

const store = messageStore()
const userInfo = store.getUserInfo();
const showColorDiv = ref<boolean>(false);

let wheelToTop: number = 0;

const mouseWheel = (event: WheelEvent) => {
  const delta: number = event.deltaY
  const colorChangeDiv = document.querySelector('.colorChange') as HTMLElement
  if (!couldChange.value) return
  if (delta < 0 && wheelToTop == 0) {
    colorChangeDiv.style.top = '20%'
    wheelToTop = 1
  } else if (delta > 0 && wheelToTop == 1) {
    colorChangeDiv.style.top = '70%'
    wheelToTop = 0
  }
}

</script>
<template>
  <div id="content">
    <router-link to="/personal" class="link avatar" @click="selectedIndex = -1; showColorDiv = true; couldChange = true">
      <img :src="userInfo.avatar" alt="avatar">
    </router-link>
    <router-link to="/" class="link" @click="selected(0)" :class="{selectedBg: selectedIndex === 0}">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon"
           viewBox="0 0 16 16">
        <path
            d="M3.857 0 1 2.857v10.286h3.429V16l2.857-2.857H9.57L14.714 8V0H3.857zm9.714 7.429-2.285 2.285H9l-2 2v-2H4.429V1.143h9.142v6.286z"/>
        <path d="M11.857 3.143h-1.143V6.57h1.143V3.143zm-3.143 0H7.571V6.57h1.143V3.143z"/>
      </svg>
    </router-link>
    <router-link to="/notFound" class="link" @click="selected(1)" :class="{selectedBg: selectedIndex === 1}">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon"
           viewBox="0 0 16 16">
        <path
            d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
      </svg>
    </router-link>
    <router-link to="/notFound" class="link" @click="selected(2)" :class="{selectedBg: selectedIndex === 2}">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon"
           viewBox="0 0 16 16">
        <path
            d="M13 6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm0 3a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h5z"/>
        <path
            d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1H2zM1 4v10a1 1 0 0 0 1 1h2V4H1zm4 0v11h9a1 1 0 0 0 1-1V4H5z"/>
      </svg>
    </router-link>
    <router-link to="/notFound" class="link" @click="selected(3)" :class="{selectedBg: selectedIndex === 3}">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon"
           viewBox="0 0 16 16">
        <path
            d="M9.482 9.341c-.069.062-.17.153-.17.309 0 .162.107.325.3.456.877.613 2.521.54 2.592.538h.002c.667 0 1.32-.18 1.894-.519A3.838 3.838 0 0 0 16 6.819c.018-1.316-.44-2.218-.666-2.664l-.04-.08C13.963 1.487 11.106 0 8 0A8 8 0 0 0 .473 5.29C1.488 4.048 3.183 3.262 5 3.262c2.83 0 5.01 1.885 5.01 4.797h-.004v.002c0 .338-.168.832-.487 1.244l.006-.006a.594.594 0 0 1-.043.041Z"/>
        <path
            d="M.01 7.753a8.137 8.137 0 0 0 .753 3.641 8 8 0 0 0 6.495 4.564 5.21 5.21 0 0 1-.785-.377h-.01l-.12-.075a5.45 5.45 0 0 1-1.56-1.463A5.543 5.543 0 0 1 6.81 5.8l.01-.004.025-.012c.208-.098.62-.292 1.167-.285.129.001.257.012.384.033a4.037 4.037 0 0 0-.993-.698l-.01-.005C6.348 4.282 5.199 4.263 5 4.263c-2.44 0-4.824 1.634-4.99 3.49Zm10.263 7.912c.088-.027.177-.054.265-.084-.102.032-.204.06-.307.086l.042-.002Z"/>
        <path
            d="M10.228 15.667a5.21 5.21 0 0 0 .303-.086l.082-.025a8.019 8.019 0 0 0 4.162-3.3.25.25 0 0 0-.331-.35c-.215.112-.436.21-.663.294a6.367 6.367 0 0 1-2.243.4c-2.957 0-5.532-2.031-5.532-4.644.002-.135.017-.268.046-.399a4.543 4.543 0 0 0-.46 5.898l.003.005c.315.441.707.821 1.158 1.121h.003l.144.09c.877.55 1.721 1.078 3.328.996Z"/>
      </svg>
    </router-link>
    <div class="changeLight link" @click="changeTheme">
      <svg v-if="themeFlag" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon"
           viewBox="0 0 16 16">
        <path
            d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm.5-9.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm5-5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm-11 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9.743-4.036a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm-7.779 7.779a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm7.072 0a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707zM3.757 4.464a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707z"/>
      </svg>
      <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon"
           viewBox="0 0 16 16">
        <path
            d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8.5 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm5-5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm-11 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9.743-4.036a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm-7.779 7.779a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm7.072 0a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707zM3.757 4.464a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707z"/>
      </svg>
    </div>
    <div :style="{opacity: showColorDiv ? '1' : '0'}" class="colorChange"></div>
  </div>
  <router-view v-slot="{ Component }" @wheel="mouseWheel">
    <transition name="fade">
      <component :is="Component"/>
    </transition>
  </router-view>
</template>
<style en="less" scoped>
.fade-leave-active,
.fade-enter-active {
  transition: all 0.8s ease;
  z-index: -1;
  width: calc(100% - 60px);
  position: absolute;
}

.fade-enter-from {
  left: -100%;
  transform: scale(0.8);
  width: calc(100% - 60px);
}

.fade-enter-to {
  transform: scale(1);
  left: 60px;
}

.fade-leave-to {
  transform: scale(0.8);
  left: 100%;
}

.fade-leave-from {
  transform: scale(1);
  left: 60px;
}

#content {
  background-color: var(--color-bg);
  height: 100%;
  position: relative;
  width: 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .colorChange {
    height: 100%;
    width: 100%;
    background: linear-gradient(to top, #fa3b56, rgba(0, 0, 0, 0));
    position: absolute;
    top: 70%;
    transition: all 0.5s ease;
  }
  .avatar {
    border-radius: 50%;
    height: 50px;
    width: 50px;
    margin-bottom: 30px;
    img {
      height: 50px;
      width: 50px;
    }
  }
}

.selectedBg {
  background-color: #fa3b56;

  .icon {
    color: white !important;
  }
}

.link {
  margin-top: 25px;
  height: 40px;
  position: relative;
  width: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  z-index: 1;

  &:hover {
    background-color: var(--hover-bg);
  }

  .icon {
    height: 20px;
    width: 20px;
    color: var(--color-font);
  }
}
</style>